// @ts-nocheck
import React, { Component } from "react";
import { Input, Button, Toast } from "antd-mobile";
import AMapLoader from "@amap/amap-jsapi-loader";
import { Link } from "react-router-dom";
import { Map_Key } from "@/utils/config";
import { pointSearch } from "./service";
import gcoord from "gcoord";
import { useNavigate } from "react-router-dom";
import "./index.less";
export interface IAddressItem {
	city?: string; //市
	district?: string; //区
	township?: string; // 街道 社区
	street?: string; //路
	contry?: string; //门牌号
	hadress: string; //详细地址
	longitude: number; //经度
	latitude: number; //纬度
}

interface IState {
	value: string;
	address: string;
	formItem: {
		content?: string;
		addressDetailedUser?: string;
		type?: string[];
		fileFront?: string;
		address?: string;
		title?: string;
	};
	addressItem: IAddressItem;
}

type IProps = {};

const DEFALTE_ADDRESS: IAddressItem = {
	hadress: "", //详细地址
	longitude: -1, //经度
	latitude: -1, //纬度
};

class ReadOnlyMap extends Component<IProps, IState> {
	map: {};
	marker: any;
	geocoder: any;
	geolocation: any;
	cityCode: string | null;
	current: any;
	placeSearch: any;
	auto: any;
	heaf: string;
	constructor() {
		console.log(window.location);

		super();
		this.map = {};
		this.marker = null;
		this.geocoder = null;
		this.geolocation = null;
		this.cityCode = "028";
		this.current = null;
		this.placeSearch = null;
		this.auto = null;
		this.heaf = "";
		this.state = {
			value: "",
			address: "",
			formItem: {},
			addressItem: DEFALTE_ADDRESS,
			pointInfo: {},
			isPoint: false,
			back: window.location.search.split("=")[2],
			url: window.location.search.split("=")[1],
		};
	}
	componentDidMount() {
		console.log(this.state.url);
		this.heaf = window.location.search.split("=")[1];
		AMapLoader.load({
			key: Map_Key, // 申请好的Web端开发者Key，首次调用 load 时必填
			version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
			plugins: ["AMap.Geocoder", "AMap.PlaceSearch", "AMap.AutoComplete", "AMap.Marker", "AMap.Geolocation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
		})
			.then((AMap) => {
				const that = this;
				this.map = new AMap.Map("container", {
					zoom: 15,
					resizeEnable: true,
					center: [106.63, 30.46],
					// center: [104.07, 30.57],
				});
				// this.map.setCity("简阳市");
				this.map.getCity((result) => {
					{
						that.cityCode = result.citycode;
						that.placeSearch.setCity(result.citycode);
						that.auto.setCity(result.citycode);
					}
				});

				// this.current = Toast.show({
				// 	icon: "loading",
				// 	content: "定位中…",
				// 	duration: 0,
				// });
				this.geolocation = new AMap.Geolocation({
					convert: true,
					enableHighAccuracy: true,
					timeout: 10000, // 10秒钟超时
					maximumAge: 1000 * 60 * 5,
					showMarker: true,
					panToLocation: true,
					zoomToAccuracy: true,
					GeoLocationFirst: true,
					getCityWhenFail: true,
					needAddress: true,
					useNative: true,
				});

				this.map.addControl(this.geolocation);
				this.geolocation.getCurrentPosition(this.getCurrentPosition);

				this.geocoder = new AMap.Geocoder();
				this.marker = new AMap.Marker();
				var autoOptions = {
					input: "tipinput",
				};

				this.auto = new AMap.AutoComplete(autoOptions);
				this.placeSearch = new AMap.PlaceSearch({
					map: that.map,
				}); //构造地点查询类
				function select(e) {
					that.setState({ value: e.poi.name });
					that.placeSearch.search(e.poi.name); //关键字查询查询
				}
				this.placeSearch.on("markerClick", this.markClickCallBack);
				this.auto.on("select", select); //注册监听，当选中某条记录时会触发
				this.map.on("movestart", function () {
					that.map.off("dragging", that.draggingClic);
				});
				this.map.on("moveend", function () {
					that.map.on("dragging", that.draggingClic);
				});
				// this.map.on('dragging', draggingClic);
			})
			.catch((e) => {
				console.error(e);
			});
		let formItem = JSON.parse(localStorage.getItem("form") || JSON.stringify(""));
		localStorage.removeItem("form");
		this.setState({ ...this.state, formItem });
	}

	componentWillUnmount(): void {
		Toast.clear();
	}

	render() {
		return (
			<>
				<div
					id="container"
					className="map"
					style={{ height: "100%" }}></div>
			</>
		);
	}
}
export default ReadOnlyMap;
